<template>
    <div class="home">
        <div class="header">
            <input type="text" placeholder="输入商家,商品名称">
        </div>
        <div class="center">
            <div class="pic">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.cndesign.com%2Fupload%2Fnews%2Fday_160719%2F201607191150535543.gif&refer=http%3A%2F%2Fimg.cndesign.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668084872&t=8dfa04b106727e2d5d5d6c7363dac34a"
                    alt="">
            </div>
            <h4>猜你喜欢</h4>
            <div class="like">
                <span v-for="(item, index) in like" :key="index">{{ item }}</span>
            </div>
            <div class="reduce">
                <span v-for="(item, index) in reduce" :key="index">{{ item }}</span>
            </div>
            <div class="list">
                <div class="shop" v-for="(item, index) in shoplist" :key="index">
                    <div class="imgbox">
                        <img :src="item.picUrl" alt="">
                    </div>
                    <div class="text">
                        <h4 class="name">{{ item.name }}</h4>
                        <div class="desc">{{ item.minPriceTip }} {{ item.mothSalesTip }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            like: [
                '综合排序', '距离最近', '销量最高', '筛选'
            ],
            reduce: [
                '年货节热卖', '津贴联盟', '满减优惠', '品质联盟'
            ],
            shoplist: [],
        }
    },
    mounted() {
        axios.get('/api/shop/list').then((res) => {
            this.shoplist = res.data;
            // console.log(res.data);
            this.shoplist = res.data.list; //保存从服务器返回的店铺数据
        })
    }
}
</script>

<style>
* {
    padding: 0;
    margin: 0;
}

.header {

    height: 70px;
    width: 100%;
    text-align: center;
    background: skyblue;
}

.header input {
    text-align: center;
    width: 95%;
    height: 35px;
    position: relative;
    top: 25px;
    border-radius: 25px;
    outline: none;
    border: 0px;
}

.pic {
    margin: 10px 0px;
    width: 100%;
    height: 100px;
}

.pic img {
    border-radius: 10px;
    width: 100%;
    height: 100px;
}

.center {
    height: 100%;
    padding: 0px 10px;
}

.like {
    margin-top: 10px;
    display: flex;
    width: 100%;
    font-size: 15px;
    justify-content: space-between;
}

.reduce {
    margin-top: 10px;
    display: flex;

    width: 100%;
    justify-content: space-between;
}

.reduce span {
    font-size: 12px;

    background-color:#e4e4e4;
    padding: 5px 5px;
}

.list .shop {
    display: flex;
    margin: 10px;
}

.imgbox {

    width: 80px;
    height: 80px;
    margin-right: 10px;
}

.imgbox img {
    border: 1px solid #e4e4e4;
    border-radius: 5px;
    width: 100%;
    height: 100%;

}

.list .shop {
    display: flex;
    margin: 10px;
}

.imgbox {
    width: 80px;
    height: 80px;
    margin-right: 10px;
}

.imgbox img {
    width: 100%;
    height: 100%;

}

.list .shop {
    display: flex;
    margin: 10px;
}


.list .shop {
    display: flex;
    margin: 10px;
}
</style>